<script setup>
import { ref, onMounted } from "vue";
//处理进入页面时子页面背景框闪了一下
const isShow = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShow.value = true;
  }, 100);
});
</script>

<template>
  <!-- 盒子背景样式 -->
  <div class="BackgroundStyle" v-if="isShow">
    <slot></slot>
    <div class="bottom"></div>
  </div>
</template>

<style lang="scss" scoped>
.BackgroundStyle {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* X偏移 Y偏移 模糊半径 颜色 */
  // border: 1px solid #eee;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-top: 4px solid #edf2f3;
    border-left: 4px solid #edf2f3;
  }
  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-top: 4px solid #edf2f3;
    border-right: 4px solid #edf2f3;
  }
  .bottom {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      border-bottom: 4px solid #edf2f3;
      border-left: 4px solid #edf2f3;
    }
    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      border-bottom: 4px solid #edf2f3;
      border-right: 4px solid #edf2f3;
    }
  }
}
</style>
